<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/car.css"/>
		<div id="header">
			<div id="header-con">
				
			</div>
		</div>
	
		<div id="shopcar">
			<div id="car-header">
				<div class="header-info">
					<label>
						<input type="checkbox"  class="input1" value="" />
						<span>全选</span>
					</label>
					<span class="info">商品信息</span>
				</div>
			
				<div class="header-singleprice">
					<span>单价</span>
				</div>
				<div class="header-num">
					<span>数量</span>
				</div>
				<div class="header-price">
					<span>小计</span>
				</div>
				<div class="header-act">
					<span>操作</span>
				</div>
			</div>
			<div id="car-content">
				<div class="content-info header-info">
					<label>
						<input type="checkbox"  class="input" value="" />
					</label>
					<a href=""><img src="./img/car1.jpg" ></a>
					<span class="text">飞科智能感应剃须刀FS927 <br>
					<i>创新黑科技 智能感应式剃须刀</i>
					</span>
				</div>
							
				<div class="header-singleprice content-singleprice">
					<span>￥<b style="font-weight: normal;">299</b>.00</span>
				</div>
				<div class="header-num content-num">
					<button type="button" class="button1">-</button>
					<input type="" name="" id="" value="1" />
					<button type="button" class="button2">+</button>
				</div>
				<div class="header-price content-price">
					<span>￥<span><b style="font-weight: normal;">299</b>.00</span></span>
				</div>
				<div class="header-act content-act">
					<span>删除</span>
				</div>
			</div>
			<div id="car-bottom">
				<div class="header-info bottom-info" >
					<label>
						<input type="checkbox"  class="input input1" value="" />
						<span>全选</span>
						<span>批量删除</span>
					</label>
					
				</div>
				
				<div class="bottom-right">
					<span class="text">应付金额</span>
					<span class="amount">￥<b style="font-weight: normal;">0</b></span>
					<button type="button">结算</button>
				</div>
			</div>
		</div>
				
		<div id="footer">
			
		</div>
	</body>
</html>
<script src="js/jquery.js"></script>
<script>
	
	$("#header-con").load("header.html",function(){});
	$("#footer").load("footer.html",function(){});
	
	//全选
	      $(function() {
	            var allInput = $(".input1");
				var k = $(".content-price  span").eq(1);
				var m = $(".bottom-right .amount b")
	            allInput.click(function () {
	                if (this.checked == true) {
	                    $(".input").prop('checked', true);
	                    $("label").addClass("checked");
						console.log(m.text());
						console.log(k.text());
						m.text(k.text())
	                } else {
	                    $(".input").prop('checked', false);
	                    $("label").removeClass("checked");
						m.text(0)
	                }
	            });
	            $(".input").click(function () {
	                $(this).parent().toggleClass("checked");
	                var s = $(".input").length;
	                var a = $(".input:checked").length;
	                if (s == a) {
	                    allInput.prop('checked', true);
	                    allInput.parent().addClass("checked");
						
	                } else {
	                    allInput.prop('checked', false);
	                    allInput.parent().removeClass("checked");
	                }
					//结算
					if(this.checked){
						m.text(k.text());	
					}else{
						m.text(0);
					}
	            });
				
	        });
	
	//数量
	// 减
	$(".content-num .button1").click(function(){
		var i = $(".content-num input");
		let k = $(".content-price  b");
		let p = $(".content-singleprice b");
		var j = parseInt(i.val());
		if(j>1){
			i.val(j-1)
		}else{
			i.val(1)
		}
		// console.log(j*p.text());
		k.text(j*p.text());
	})
	
	
	
	
	//加
	$(".content-num .button2").click(function(){
		var t = $(".content-num input");
		let k = $(".content-price  b");
		let p = $(".content-singleprice b");
		t.val(parseInt(t.val())+1);
		k.text(t.val()*p.text());
	})
	
	//删除
	$(".content-act span").click(function(){
		$(this).css({
			textDecoration: "underline"
		})
		$("#car-content").css({
			display:"none"
		})
	})
	
	//结算
	// $(".input").click(function(){
	// 	if(this.checked){
	// 		$(".bottom-right .amount b").text() == $(".content-price b").text()
	// 	}
	// })
</script>